<template>
  <view class="dialog-wrapper" v-if="show">
    <view class="dialog-mask" @click="closeDialog"></view>
    <view class="dialog-content">
      <view class="dialog-title">填写收货地址</view>
      <view class="form-item">
        <view class="form-label">收货人：</view>
        <input type="text" class="form-input" placeholder="请输入收货人姓名" v-model="addressForm.consignee" />
      </view>
      <view class="form-item">
        <view class="form-label">手机号：</view>
        <input type="text" class="form-input" placeholder="请输入手机号" v-model="addressForm.mobile" />
      </view>
      <view class="form-item">
        <view class="form-label">详细地址：</view>
        <textarea class="form-textarea" placeholder="请输入详细地址" v-model="addressForm.address"></textarea>
      </view>
      <view class="dialog-footer">
        <view class="dialog-btn cancel-btn" @click="closeDialog">取消</view>
        <view class="dialog-btn confirm-btn" @click="confirmAddress">确定</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:show', 'confirm']);

// 地址表单数据
const addressForm = reactive({
  consignee: '',
  mobile: '',
  address: '',
});

// 关闭弹窗
const closeDialog = () => {
  emit('update:show', false);
};

// 确认地址
const confirmAddress = () => {
  // 简单验证
  if (!addressForm.consignee.trim()) {
    uni.showToast({
      title: '请输入收货人姓名',
      icon: 'none'
    });
    return;
  }
  if (!/^1\d{10}$/.test(addressForm.mobile)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    });
    return;
  }
  if (!addressForm.address.trim()) {
    uni.showToast({
      title: '请输入详细地址',
      icon: 'none'
    });
    return;
  }

  // 返回地址信息
  emit('confirm', {
    id: Date.now(), // 临时ID
    consignee: addressForm.consignee,
    mobile: addressForm.mobile,
    address: addressForm.address
  });
  
  // 重置表单并关闭弹窗
  addressForm.consignee = '';
  addressForm.mobile = '';
  addressForm.address = '';
  closeDialog();
};
</script>

<style scoped>
.dialog-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.dialog-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.dialog-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 30rpx;
  box-sizing: border-box;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.dialog-title {
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}

.form-item {
  margin-bottom: 20rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.form-input {
  width: 100%;
  height: 80rpx;
  border: 1px solid #ddd;
  border-radius: 6rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  font-size: 28rpx;
}

.form-textarea {
  width: 100%;
  height: 160rpx;
  border: 1px solid #ddd;
  border-radius: 6rpx;
  padding: 20rpx;
  box-sizing: border-box;
  font-size: 28rpx;
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
}

.dialog-btn {
  width: 45%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 6rpx;
  font-size: 30rpx;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #666;
}

.confirm-btn {
  background-color: #1989fa;
  color: #fff;
}
</style> 